

$(function () {


    $(".ul-group-list li:eq(0)").addClass("active");
    $(".im-chat-group-name").text($(".ul-group-list li:eq(0)").text());
    $(".ul-group-menu li:eq(0)").addClass("active");


    //群组列表绑定点击事件
    $(".ul-group-list li").click(function () {

        //切换选中样式
        $(".ul-group-list li").removeClass("active");
        $(this).addClass("active");

        //显示群组名
        $(".im-chat-group-name").text($(this).text());


    });

    //群组分类按钮绑定点击事件
    $(".ul-group-menu li").click(function () {

        //切换选中样式
        $(".ul-group-menu li").removeClass("active");
        $(this).addClass("active");

        if($(".ul-group-menu li").index(this) == 0 )
        {
            $(".im-chat-body-auto").show();
            $(".im-chat-other-auto").hide();
        }
        else
        {
            $(".im-chat-body-auto").hide();
            $(".im-chat-other-auto").show();

            //显示群组名
            $(".im-chat-other-list").text($(this).text());
        }


    });

    //发送按钮
    $("#btnSend").click(function() {
        //console.log($(".im-chat-edit-text").html());
        sendMessage();
        // $(".im-chat-message-list").append("<p>" + $(".im-chat-edit-text").html() + "</p>");
    });

    $("#im-chat-edit-text").emoji({
        button: "#btnEmoji",
        showTab: false,
        animation: 'none',
        position: 'topRight',
        icons: [{
            name: "QQ表情",
            path: "dist/img/qq/",
            maxNum: 91,
            excludeNums: [41, 45, 54],
            file: ".gif"
        }]
    });

    webst();

})

var username="111";
var messageArea = document.querySelector('#messageArea1');

function webst() {
    var socket = new SockJS('/ws');
    stompClient = Stomp.over(socket);

    stompClient.connect({}, onConnected, onError);

}

function onConnected() {
    // Subscribe to the Public Topic
    stompClient.subscribe('/topic/public', onMessageReceived);

    // Tell your username to the server
    stompClient.send("/app/chat.addUser",
        {},
        JSON.stringify({sender: username, type: 'JOIN'})
    )

}
function onMessageReceived(payload) {
    var message = JSON.parse(payload.body);

    var messageElement = document.createElement('li');

    if(message.type === 'JOIN') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' joined!';
    } else if (message.type === 'LEAVE') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' left!';
    } else {
        messageElement.classList.add('chat-message');

        var avatarElement = document.createElement('i');
        var avatarText = document.createTextNode(message.sender[0]);
        avatarElement.appendChild(avatarText);
        avatarElement.style['background-color'] = getAvatarColor(message.sender);

        messageElement.appendChild(avatarElement);

        var usernameElement = document.createElement('span');
        var usernameText = document.createTextNode(message.sender);
        usernameElement.appendChild(usernameText);
        messageElement.appendChild(usernameElement);
    }

    var textElement = document.createElement('p');
    var messageText = document.createTextNode(message.content);
    textElement.appendChild(messageText);

    messageElement.appendChild(textElement);

    messageArea.appendChild(messageElement);
    messageArea.scrollTop = messageArea.scrollHeight;
}


function sendMessage() {
    var messageContent = $(".im-chat-edit-text").html().trim();

    if(messageContent && stompClient) {
        var chatMessage = {
            sender: username,
            content: messageContent,
            type: 'CHAT'
        };

        stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
        messageContent = '';
    }

}

function getAvatarColor(messageSender) {
    var hash = 0;
    for (var i = 0; i < messageSender.length; i++) {
        hash = 31 * hash + messageSender.charCodeAt(i);
    }

    var index = Math.abs(hash % colors.length);
    return colors[index];
}
